<template>
  <div class="order-bottom">
      <div class="left">
        <div v-if="item.orderStatus === 1">
          <img class="left-img" src="@/assets/img/order/icon-time.png" alt="" />
          <span class="left-minute">{{ remainingTime }}分</span>
          <span>{{ item.summary }}</span>
        </div>
    </div>

    <div class="right" v-if="item.orderStatus === 1">
      <van-button class="order-btn order-btn-r" type="success" size="small"> 联系房东 </van-button>
      <van-button class="order-btn" type="success" size="small" color="#ff9645">
        去支付
      </van-button>
    </div>
    <div class="right" v-if="item.orderStatus === 5">
      <van-button class="order-btn order-btn-r" type="success" size="small">删除</van-button>
      <van-button
        class="order-btn again"
        type="success"
        size="small"
        color="#fff"
        style="color: #ff9645"
      >
        再次预定
      </van-button>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed, onMounted } from 'vue'
  const props = defineProps({
    item: {
      type: Object,
      default: () => {}
    }
  })
  const remainingTime = ref(0)
  const timeId = ref(null)
  let counter = 1
  const startCountDown = () => {
    timeId.value = setInterval(() => {
      remainingTime.value = parseInt((props.item.countdown - counter) / 60)
      counter++
      if (remainingTime.value <= 0) {
        clearInterval(timeId.value)
        return
      }
    }, 1000)
  }

  onMounted(() => {
    startCountDown()
  })
</script>

<style lang="less" scoped>
  .order-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
    .left {
      font-size: 11px;
      color: #666;

      .left-img {
        width: 11px;
        height: 11px;
        margin-top: 3px;
      }
      .left-minute {
        color: #ff9645;
      }
    }
    .right {
      display: flex;
      .order-btn-r {
        margin-right: 10px;
      }
      .order-btn {
        color: #666;
        background: #fff;
        border: 1px solid #e9e9e9;
        border-radius: 6px;
        width: 75px;
        height: 34px;
        font-size: 14px;
      }

      .again {
        border: 1px solid #ff9645 !important;
        border-radius: 6px;
        width: 75px;
        height: 34px;
        font-size: 14px;
      }
    }
  }
</style>
